<template>
  <div class="wrapLimit clx main">
    <div class="commodityDetail">
      <el-form label-width="120px" class="form-baseinfo">
        <div class="basicInfo">
          <el-row>
            <el-col :span="24">
              <p class="title">物料基本信息</p>
            </el-col>
          </el-row>
          <el-form-item label="物料简称">
            <el-input v-model="data.cName" />
          </el-form-item>
          <el-form-item label="物料所属大类">
            <el-select v-model="data.childList[0].id" @change="bigTypeChange">
              <el-option v-for="item in bigType" :key="item.id" :label="item.cName" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="物料大类编码">
            <el-input v-model="data.childList[0].categoryNo" readonly />
          </el-form-item>
          <el-form-item label="物料所属中类">
            <el-select v-model="data.childList[0].childList[0].id" @change="centreTypeChange">
              <el-option v-for="item in centreType" :key="item.id" :label="item.cName" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="物料中类编码">
            <el-input v-model="data.childList[0].childList[0].categoryNo" readonly />
          </el-form-item>
          <el-form-item label="物料所属小类">
            <el-select v-model="data.childList[0].childList[0].childList[0].id" @change="smallTypeChange">
              <el-option v-for="item in smallType" :key="item.categoryNo" :label="item.cName" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="物料小类编码">
            <el-input v-model="data.childList[0].childList[0].childList[0].categoryNo" readonly />
          </el-form-item>
          <el-form-item label="上传物料图片" class="upload">
            <el-upload
              ref="upload"
              :action="public_config.file_api + `/api/file-management/files/upload`"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :file-list="fileList"
              list-type="picture"
              :headers="headers"
              :limit="1"
              :on-exceed="handleExceed"
              :before-remove="beforeRemove"
              :on-success="handleSuccess"
            >
              <el-button class="uploadButton" size="small" type="primary">点击上传</el-button>
            </el-upload>
            <div v-if="data.imagesList && data.imagesList.length > 0">
              <el-image
                v-show="!isUpdateImg"
                style="width: 100px; height: 100px"
                :src="data.imagesList[0].imgesUrl"
                fit="cover"
              />
            </div>
          </el-form-item>
        </div>
      </el-form>

      <el-row class="form-baseinfo">
        <el-col :span="24">
          <p class="title">物料明细</p>
        </el-col>
        <LPTablePage
          :show-index="true"
          :show-indexfixed="false"
          index-label="序号"
          :table-data="tableData"
          :table-column="tableColumn"
          :show-page="false"
          align="center"
        >
          <template slot="statusName" slot-scope="{ row }">
            <div v-if="row.status == 1">可售</div>
            <div v-else>不可售</div>
          </template>
          <template slot="cz" slot-scope="{ row }">
            <el-button v-if="row.status == 1" type="text" @click="startAndforbidden(row)">禁用</el-button>
            <el-button v-else type="text" @click="startAndforbidden(row)">启用</el-button>
          </template>
        </LPTablePage>
      </el-row>
      <div class="form-baseinfo">
        <el-button size="medium" type="primary" @click="back">关闭</el-button>
        <el-button size="medium" type="primary" @click="Save">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { updateProduct } from '@/api/LaborProtection/product'
import { getByIdProduct, getCategoryInfo } from '@/api/LaborProtection/categoryInfo'
import { getProductList, updateStatusProduct } from '@/api/LaborProtection/product'
import { closeActiveTag } from '@/utils/lpUtils.js'
import { getToken } from '@/utils/auth'
import LPTablePage from '@/components/LPTablePage/index.vue'

export default {
  name: 'CommodityEdit',
  components: { LPTablePage },
  data() {
    return {
      id: '',
      isUpdateImg: false,
      imgesUrl: '',
      headers: {
        Authorization: 'bearer ' + getToken()
      },
      data: {
        cName: '',
        childList: [
          {
            id: '',
            categoryNo: '',
            childList: [
              {
                id: '',
                categoryNo: '',
                childList: [
                  {
                    id: '',
                    categoryNo: ''
                  }
                ]
              }
            ]
          }
        ],
        imagesList: [
          {
            imgesUrl: ''
          }
        ]
      },
      bigType: [],
      centreType: [],
      smallType: [],
      tableData: [],
      fileList: [],
      // 表格字段
      tableColumn: [
        { label: '物料编码', prop: 'pNo' },
        { label: '物料名称', prop: 'pTitle' },
        // {label: "单位", prop: "unit"},
        { label: '单位', prop: 'pUnit' },
        { label: '价格', prop: 'pPrice' },
        { label: '状态', prop: 'statusName', render: true },
        { label: '操作', prop: 'cz', render: true, width: '150' }
      ],
      rules: {
        cName: [{ required: true, message: '请输入物料简称', trigger: 'blur' }],
        smallTypeId: [{ required: true, message: '请选择物料小类', trigger: 'change' }],
        centreTypeId: [{ required: true, message: '请选择物料中类', trigger: 'change' }],
        bigTypeId: [{ required: true, message: '请选择物料大类', trigger: 'change' }]
      }
    }
  },
  mounted() {
    this.id = this.$route.query.id
    this.getByIdProduct()
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    handleExceed() {
      this.$message.warning(`限制选择 1 个图片`)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    handleSuccess(res, file) {
      this.isUpdateImg = true
      this.imgesUrl = public_config.file_api + '/api/file-management/files/www/' + file.response
      console.log(this.imgesUrl)
    },
    getByIdProduct() {
      getByIdProduct(this.id).then((res) => {
        this.data = res
        this.getCategoryInfo(1)
        this.getCategoryInfo(2, res.childList[0].categoryNo)
        this.getCategoryInfo(3, res.childList[0].childList[0].categoryNo)
        this.getProductList()
      })
    },
    getProductList() {
      const data = {
        PName: this.data.cName,
        PClassId: this.data.childList[0].childList[0].childList[0].id,
        SkipCount: 0
      }
      getProductList(data).then((res) => {
        this.tableData = res.items
      })
    },
    startAndforbidden(row) {
      updateStatusProduct(row.id).then((res) => {
        if (!res.error) {
          this.getProductList()
        }
      })
    },
    back() {
      closeActiveTag(this, '/laborProtection/commodityManage')
    },
    Save() {
      if (!this.data.cName) {
        return this.$message.error('物料简称不能为空')
      }
      if (!this.data.childList[0].categoryNo) {
        return this.$message.error('请选择物料大类')
      }
      if (!this.data.childList[0].childList[0].categoryNo) {
        return this.$message.error('请选择物料中类')
      }
      if (!this.data.childList[0].childList[0].childList[0].categoryNo) {
        return this.$message.error('请选择物料小类')
      }
      const data = {
        id: this.data.id,
        cName: this.data.cName,
        childList: [
          {
            id: this.data.childList[0].childList[0].childList[0].id
          }
        ],
        productList: this.tableData
      }

      if (this.data.imagesList !== null && this.data.imagesList.length > 0) {
        data.imagesList = [
          {
            imgesUrl: this.data.imagesList[0].imgesUrl
          }
        ]
      }
      if (this.isUpdateImg) {
        data.imagesList = [
          {
            imgesUrl: this.imgesUrl
          }
        ]
      }
      updateProduct(data).then((res) => {
        if (!res.error) {
          this.$message.success('保存成功')
          this.back()
        }
      })
    },
    /**
     *  1：大类 2：中类 3：小类
     * @param {*} type
     */
    getCategoryInfo(type, parentId) {
      const data = {
        CCLass: type,
        SkipCount: 0
      }
      if (parentId) {
        data.parentId = parentId
      }
      getCategoryInfo(data).then((res) => {
        if (!res.error) {
          if (type == 1) {
            this.bigType = res.items
          } else if (type == 2) {
            this.centreType = res.items
          } else {
            this.smallType = res.items
          }
        }
      })
    },
    bigTypeChange(v) {
      this.data.childList[0].childList[0].id = ''
      this.data.childList[0].childList[0].categoryNo = ''
      this.data.childList[0].childList[0].childList[0].id = ''
      this.data.childList[0].childList[0].childList[0].categoryNo = ''
      this.bigType.forEach((item) => {
        if (item.id == v) {
          this.data.childList[0].categoryNo = item.categoryNo
          this.getCategoryInfo(2, item.categoryNo)
        }
      })
    },
    centreTypeChange(v) {
      this.data.childList[0].childList[0].childList[0].id = ''
      this.data.childList[0].childList[0].childList[0].categoryNo = ''
      this.centreType.forEach((item) => {
        if (item.id == v) {
          this.data.childList[0].childList[0].categoryNo = item.categoryNo
          this.getCategoryInfo(3, item.categoryNo)
        }
      })
    },
    smallTypeChange(v) {
      console.log(v)
      this.smallType.forEach((item) => {
        if (item.id == v) {
          this.data.childList[0].childList[0].childList[0].categoryNo = item.categoryNo
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.commodityDetail {
  .form-baseinfo {
    border: 1px solid #dcdfe6;
    padding: 10px;

    .basicInfo {
      width: 40%;
      // min-height: 550px;
    }

    .title {
      font-size: 16px;
      font-weight: 600;
    }

    ::v-deep .el-form-item {
      padding-left: 20px;
      margin-bottom: 10px;
    }

    ::v-deep .el-form-item__error {
      color: #ff4949;
      font-size: 12px;
      line-height: 1;
      padding-top: 4px;
      position: relative;
      top: 100%;
    }

    ::v-deep .el-select {
      width: 100%;
    }

    .main {
      margin: 0.2rem;
    }

    .main > div {
      padding: 0.2rem;
    }
  }
}
</style>
